<!DOCTYPE html>
<html>
	<!-- by Nixsawe -->
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title>矩阵键盘 - 模拟器 - by Nixsawe</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
	</head>
	<body>
		<div class="container">
			<div class="outer">
				<!-- 键盘区 -->
				<div id="keyboard">
					<img class="key" id="S1" src="">
					<img class="key" id="S2" src="">
					<img class="key" id="S3" src="">
					<img class="key" id="S4" src="">
					<img class="key" id="S5" src="">
					<img class="key" id="S6" src="">
					<img class="key" id="S7" src="">
					<img class="key" id="S8" src="">
					<img class="key" id="S9" src="">
					<img class="key" id="S10" src="">
					<img class="key" id="S11" src="">
					<img class="key" id="S12" src="">
					<img class="key" id="S13" src="">
					<img class="key" id="S14" src="">
					<img class="key" id="S15" src="">
					<img class="key" id="S16" src="">
				</div>

				<!-- 接线 -->
				<div id="wire">
					<div class="wire row" id="wire-7"></div>
					<div class="wire row" id="wire-6"></div>
					<div class="wire row" id="wire-5"></div>
					<div class="wire row" id="wire-4"></div>
					<div class="wire col" id="wire-3"></div>
					<div class="wire col" id="wire-2"></div>
					<div class="wire col" id="wire-1"></div>
					<div class="wire col" id="wire-0"></div>
				</div>

				<!-- 端口 -->
				<div id="port-bit">
					<div class="port-bit" id="port-bit-7">P17</div>
					<div class="port-bit" id="port-bit-6">P16</div>
					<div class="port-bit" id="port-bit-5">P15</div>
					<div class="port-bit" id="port-bit-4">P14</div>
					<div class="port-bit" id="port-bit-3">P13</div>
					<div class="port-bit" id="port-bit-2">P12</div>
					<div class="port-bit" id="port-bit-1">P11</div>
					<div class="port-bit" id="port-bit-0">P10</div>
				</div>

				<!-- 输入输出 -->
				<div class="input">
					<p>
						<input type="button" id="revert-button" value="Revert" title="反置按键状态">
						<input type="button" id="reset-button" value="Reset" title="重置按键状态">
						<input type="button" id="swap-button" value="Swap" title="行列输出电平反转/按住shift使用另一种反转方式">
						<input type="button" id="reverse-button" value="Reverse" title="输出电平反相">
					</p>
					<p title="端口输出电平">&nbsp;&nbsp;&nbsp;P1 OUT:&nbsp;&nbsp;&nbsp;<input type="text" id="p1-in" placeholder="0xff" title="支持2、8、10、16进制数">&nbsp;(<span class="binary" id="p1-in-span" title="点击重置输出电平"><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span>b</span>)</p>
					<p title="端口输入电平">&nbsp;&nbsp;&nbsp;P1 IN:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="p1-out" placeholder="0xff">&nbsp;(<span class="binary" id="p1-out-span"><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span><span>1</span>b</span>)</p>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="./js/error.js">
		</script>
		<script type="text/javascript" src="./js/logic.js">
		</script>
		<script type="text/javascript" src="./js/main.js">
		</script>
	</body>
</html>